<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ loginSwitch ? "登录" : "注册" }}</span>
        <el-button class="button" @click="loginSwitchFn" text>{{
          !loginSwitch ? "登录" : "注册"
        }}</el-button>
      </div>
    </template>
    <div>
      <el-input :disabled="loading" v-model="username" placeholder="请输入用户名">
        <template #prepend>用户名</template>
      </el-input>
    </div>
    <br />
    <div>
      <el-input v-model="password" type="password" show-password :disabled="loading" placeholder="请输入密码">
        <template #prepend>密 &nbsp;&nbsp; 码</template>
      </el-input>
    </div>
    <br />
    <div v-show="false">
      <el-select v-model="provinceValue" class="m-2" placeholder="选择所在省份" size="small" @change="provinceChanged(val)">
        <el-option v-for="area in province" :label="area.name" :key="area.areaId" :value="area.areaId" />
      </el-select>
      <el-select v-model="areaValue" class="m-2" placeholder="选择所在城市" size="small" @change="areaChanged()">
        <el-option v-for="area in areas" :label="area.name" :key="area.name" :value="area.name" />
      </el-select>
      <el-select v-model="collegeValue" class="m-2" placeholder="选择所在高校" size="small">
        <el-option v-for="name in college" :label="name" :key="name" :value="name" />
      </el-select>
    </div>
    <el-divider content-position="center">第三方登录</el-divider>
    <span><el-icon>
        <Promotion />
      </el-icon> LXQ CLOUD</span>
    <br><br>
    <el-button type="primary" size="large" @click="login">{{
      loginSwitch ? "登录" : "注册"
    }}</el-button>
  </el-card>
</template>
<script>
export default {
  name: "LoginComponent",
  data() {
    return {
      province: [],
      areas: [],
      college: [],
      username: "",
      password: "",
      provinceValue: "",
      areaValue: "",
      collegeValue: "",
      http: this.$fetchutil,
      loginSwitch: true, //true 登录 false 注册
      loading: false
    };
  },
  created() {
    this.$request.get("/user/get_login_info").then((data) => {
      if (data.success) {
        window.location.replace("/index.html");
        return;
      }
    }).catch(err=>console.log('错误信息：'+err));
    fetch("/api/location/province", { method: "get" }).then((resp) => {
      resp.json().then((data) => {
        this.province = data;
        this.provinceValue = 1;
        this.provinceChanged();
        this.areaChanged("北京市");
      });
    });
  },
  methods: {
    provinceChanged() {
      fetch("/api/location/area?parentId=" + this.provinceValue, {
        method: "get",
      }).then((resp) => {
        resp.json().then((data) => {
          this.areas = data;
          this.college = [];
          this.areaValue = "";
        });
      });
    },
    areaChanged() {
      fetch("/api/location/college?area=" + this.areaValue, { method: "get" }).then(
        (resp) => {
          resp.json().then((data) => {
            this.college = data;
            this.collegeValue = "";
          });
        }
      );
    },
    loginSwitchFn() {
      this.loginSwitch = !this.loginSwitch;
    },
    login() {
      //TODO 判断用户名和密码是否为空
      this.loading = true
      this.http.post(
        this.loginSwitch ? "/login" : "/register",
        { username: this.username, password: this.password },
        (callback) => {
          this.loading = false
          this.$ElMessage({
            message: callback.msg,
            type: callback.code == 200 ? "success" : 'error',
          });

          localStorage.setItem("access_token", callback.data.access_token);
          localStorage.setItem("refresh_token", callback.data.refresh_token);
          window.location.replace("/index.html");
        }
      );
    },
  },
};
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>